<template>
  <div class="feedback">
    <div class="feedback-top clearfix">
      <h4>您想反馈的问题和建议内容</h4>
      <div class="h5-hairliine--surround">
        <textarea v-model="form.content" rows="8" cols="30" placeholder="请输入"></textarea>
      </div>
      <h4>上传图片
        <span style="color: #808080;">（选填，提供问题或建议截图）</span>
      </h4>
      <div class="upload cur-flex">
        <div v-for="(item, index) in imgList" :key="index" class="cur-img">
          <img :src="item" alt="">
          <i @click="removeImg(index)" class="icon iconfont icon-zhaopianshanchu-"></i>
        </div>
        <div v-if="imgList.length<3" class="upload-btn cur-flex cur-direction-column cur-justify-center cur-align-center">
          <i class="icon iconfont icon-tianjiax"></i>
          <span>添加图片</span>
          <span>（最多3张）</span>
          <div class="upload-layer">
            <input class="upload-input" type="file" accept="image/*" @change="handleChange">
          </div>
        </div>
      </div>
      <h4>您的手机号/微信/QQ，方便我们联系您</h4>
      <div class="contact h5-hairliine--surround"><input v-model="form.contact" type="text"></div>
      <mt-button @click.native="addFeedback()" class="submit-btn pull-right" type="danger">提交</mt-button>
    </div>
  </div>
</template>
<script>
import * as api from '@/service/api'
import { compress } from '../../utils/image'
export default {
  data () {
    return {
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      imgList: [],
      rules: {
        content: { required: true, message: '请输入反馈内容' }
      },
      form: {
        content: '',
        contact: ''
      },
      siteDetailData: {}
    }
  },
  computed: {
    curId () {
      return this.$route.query.id
    },
    curUser () {
      return this.$store.state.me.user.userAccount
    }
  },
  created () {
  },
  methods: {
    // 选择图片后，先压缩，再上传
    async handleChange (e) {
      if (this.imgList.length > 2) {
        this.$toast('最多只能上传3张图片！')
        return false
      }
      const files = e.target.files
      if (files.length === 0) return
      let file
      let res
      try {
        file = await compress(files[0])
        res = await api.uploadFile({ file })
        this.imgList.push(res.data.data.src)
      } catch (e) {
        return false
      }
    },
    async addFeedback () {
      try {
        await this.validate(this.form, this.rules)
      } catch (e) {
        console.log(e)
        return false
      }
      try {
        let ids = this.imgList.map((item, index) => {
          return item
        }).join(',')
        await api.addFeedback({
          ...this.form,
          pictureUrl: ids,
          source: 1
        })
        this.loading = false
        this.clearData()
        this.$toast({
          message: '反馈成功',
          iconClass: 'icon iconfont icon-check'
        })
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    clearData () {
      this.imgList = []
      this.form = {
        content: '',
        contact: ''
      }
    },
    removeImg (index) {
      this.imgList.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
.feedback {
  // min-height: 100%;
  padding: 26px;
  // background-color: #fff;
  textarea {
    width: 100%;
    resize: none;
    padding: 16px;
    color: $text-color;
    box-shadow: none;
    border: 0;
    border-color: $border-color;
  }
  h4 {
    margin-top: 46px;
    margin-bottom: 22px;
    font-size: 26px;
    color: $text-color;
  }
  .upload {
    .cur-img {
      margin-right: 10px;
      position: relative;
    }
    img {
      width: 164px;
      height: 174px;
      display: inline-block;
      display: inline-block;
      background-color: #ccc;
    }
    .icon-zhaopianshanchu- {
      position: absolute;
      top: -10px;
      right: 0px;
      font-size: 36px;
      color: $text-color;
      z-index: 10;
    }
  }
  .upload-btn {
    width: 174px;
    height: 174px;
    border: 1px dashed #b0b0b0;
    background-color: $white;
    color: #b0b0b0;
    position: relative;
    overflow: hidden;
  }
  .upload-layer {
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .upload-input {
    width: 180px;
    height: 550px;
    display: inline-block;
    position: absolute;
    top: -60px;
    left: 0;
  }
  .icon-tianjiax {
    font-size: 58px;
  }
  .contact input {
    width: 100%;
    height: 94px;
    border-width: 0;
    padding: 0 22px;
  }
  .submit-btn {
    width: 100%;
    height: 68px;
    font-size: 20px;
    text-align: center;
    margin-top: 22px;
    letter-spacing: 4px;
  }
}
</style>
